import './style.scss'
import DogButton from '@/components/Button/button'
import DogMenu from '@/components/Menu'
import DogInput from '@/components/Input'
import DogTabs from '@/components/Tabs'
import DogAutoComplete from '@/components/AutoComplete'
import DogUpload from '@/components/Upload'
import DogProgress from '@/components/Progress'
import DogFormComponent from './form'
import DogAlertComponent from './alert'
import DogButtonComponent from './button'
/**
 * fetch 缺点
 * 不支持取消请求、请求进度、缓存、超时控制、跨域请求、请求重试、请求重定向、请求代理、全局配置、abort
 * 400 500 状态码不会reject
 * 不带 cookie
 */
const fileList = [
  {
    uid: '1',
    name: 'file1',
    status: 'success',
    percent: 100
  },
  {
    uid: '2',
    name: 'file2',
    status: 'error',
    percent: 100
  },
  {
    uid: '3',
    name: 'file3',
    status: 'uploading',
    percent: 30
  }
] as any[]
const DogDesignComponents: React.FC = () => {
  const handleFetch = (query: string) => {
    return window
      .fetch(`https://jsonplaceholder.typicode.com/posts?userId=${query}`)
      .then((res) => res.json())
      .then((result) => {
        return result?.slice(0, 10)?.map((item) => {
          return {
            value: item.title,
            ...item
          }
        })
      })
  }
  return (
    <DogTabs type="card">
      <DogTabs.Item label="按钮">
        <DogButtonComponent />
      </DogTabs.Item>
      <DogTabs.Item label="警告提示">
        <DogAlertComponent />
      </DogTabs.Item>
      <DogTabs.Item label="进度条">
        <DogProgress percent={50} />
      </DogTabs.Item>
      <DogTabs.Item label={'menu'}>
        <DogMenu onSelect={(index) => console.log(index)} defaultOpenSubMenus={['3']} mode="vertical">
          <DogMenu.Item key="first">menu1</DogMenu.Item>
          <DogMenu.Item>menu2</DogMenu.Item>
          <DogMenu.Item disabled>menu3</DogMenu.Item>
          <DogMenu.SubMenu title="menu drop">
            <DogMenu.Item>drop 1</DogMenu.Item>
            <DogMenu.Item>drop 2</DogMenu.Item>
            <DogMenu.Item disabled>drop 3</DogMenu.Item>
          </DogMenu.SubMenu>
        </DogMenu>
      </DogTabs.Item>
      <DogTabs.Item label={'select'}></DogTabs.Item>
      <DogTabs.Item label={'input'}>
        <DogInput onChange={(e) => console.log(e.target.value)} icon={'edit'} />
        <DogInput prepend="http://" append={'.com'} defaultValue="www.baidu" />
        <DogInput size="lg" disabled />
      </DogTabs.Item>
      <DogTabs.Item label={'AutoComplete'}>
        <DogAutoComplete
          fetchSuggestions={async (value) => await handleFetch(value)}
          renderOption={(item) => {
            return <b>{item.value}</b>
          }}
        />
      </DogTabs.Item>
      <DogTabs.Item label="upload">
        <DogUpload
          action="https://jsonplaceholder.typicode.com/posts/"
          name="dogFile"
          multiple
          drag
          accept="image/*"
          onProgress={(percentage) => console.log('progress', percentage)} // 文件上传中
          onSuccess={(data) => console.log('success', data)} // 文件上传成功
          onError={(err) => console.log('error', err)} // 文件上传失败
          onChange={(file) => console.log('change', file)} // 文件选择完毕
          beforeUpload={(file) => {
            console.log('beforeUpload', file)
            return true
          }} // 文件上传前
          onRemove={(file) => console.log('remove', file)} // 文件移除
          defaultFileList={fileList}
          data={{ token: Date.now() }}
          headers={{ 'X-Powered-By': 'dogs' }}
        >
          <DogButton btnType="primary">upload</DogButton>
        </DogUpload>
      </DogTabs.Item>
      <DogTabs.Item label="form">
        <DogFormComponent />
      </DogTabs.Item>
    </DogTabs>
  )
}
export default DogDesignComponents
